<template>
    <div>
        <ul>
            <li v-for="(item,i) in $store.state.prodcuts" :key="i">{{item.name}}---{{item.price}}
                <button @click="reduce({index:i,num:5})">减少价格</button>
                <button @click="reduceAsync({index:i,num:5})">异步减少价格</button>
            </li>
        </ul>
    </div>
</template>

<script>
import {mapMutations,mapActions} from 'vuex'
export default {
    methods:{
        // ...mapMutations([
        //     'change'
        // ]),
        ...mapMutations({
            'reduce':'change'
        }),
        // ...mapActions([
        //     'changeAsync'
        // ])
        ...mapActions({
            reduceAsync:'changeAsync'
        })
        // reduce(i){
        //     this.$store.commit('change',{index:i,num:5})
        // },
        // reduceAsync(i){
        //     this.$store.dispatch('changeAsync',{index:i,num:5})
        // }
    }
}
</script>
